<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tarot</title>
        		<link rel="stylesheet" href="<c:url value="/index/main.css" />">
        			<link rel="stylesheet" href="<c:url value="/index/normalize.css" />">
 <style type="text/css">
        	body{background-color:black}
        	#contentdiv{color:white;
	        height:920px;
			width:70.7%;
			position:relative;
			border : silver 5px outset ;
			text-align: center;
			float:left ;
			left:1.5%;}
			a{color:#E16900;text-decoration:none;}
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
        
        <script> $(document).ready(function(){ 
        	$(window).resize(function(){ 
        		$("#body").css('width', $(window).width()); }); }); </script> 
        <link rel="stylesheet" href="<c:url value="/css/div-mar.css" />" />		
        <script>
        
        
        $(
        function constell(){
        		var url="/i_plus/View/ConstellationServlet.controller";
        		$.getJSON(url,function(info){
        			//alert(info[3].mind_word);
        			$("#showbox1").prepend(info[3].name);
        			$("#showbox2").prepend(info[4].name);
        			$("#showbox3").prepend(info[8].name);
        			$("#showbox4").prepend(info[2].name);
        			$("#showbox5").prepend(info[7].name);
        			$("#showbox6").prepend(info[6].name);
        			$("#showbox7").prepend(info[0].name);
        			$("#showbox8").prepend(info[1].name);
        			$("#showbox9").prepend(info[5].name);
        			$("#showbox10").prepend(info[11].name);
        			$("#showbox11").prepend(info[10].name);
        			$("#showbox12").prepend(info[9].name);
        			//alert($("tr1").children());
        			$("#aries1").html(info[3].mind_star);
        			$("#aries2").html(info[3].money_star);
        			$("#aries3").html(info[3].love_star);
        			$("#aries4").html(info[3].work_star);
        			$("#aries5").html(info[3].mind_word);
        			$("#aries6").html(info[3].money_word);
        			$("#aries7").html(info[3].love_word);
        			$("#aries8").html(info[3].work_word);
        			$("#goldenox1").html(info[4].mind_star);
        			$("#goldenox2").html(info[4].money_star);
        			$("#goldenox3").html(info[4].love_star);
        			$("#goldenox4").html(info[4].work_star);
        			$("#goldenox5").html(info[4].mind_word);
        			$("#goldenox6").html(info[4].money_word);
        			$("#goldenox7").html(info[4].love_word);
        			$("#goldenox8").html(info[4].work_word);
        			$("#twin1").html(info[8].mind_star);
        			$("#twin2").html(info[8].money_star);
        			$("#twin3").html(info[8].love_star);
        			$("#twin4").html(info[8].work_star);
        			$("#twin5").html(info[8].mind_word);
        			$("#twin6").html(info[8].money_word);
        			$("#twin7").html(info[8].love_word);
        			$("#twin8").html(info[8].work_word);
        			$("#cancer1").html(info[2].mind_star);
        			$("#cancer2").html(info[2].money_star);
        			$("#cancer3").html(info[2].love_star);
        			$("#cancer4").html(info[2].work_star);
        			$("#cancer5").html(info[2].mind_word);
        			$("#cancer6").html(info[2].money_word);
        			$("#cancer7").html(info[2].love_word);
        			$("#cancer8").html(info[2].work_word);
        			$("#leo1").html(info[7].mind_star);
        			$("#leo2").html(info[7].money_star);
        			$("#leo3").html(info[7].love_star);
        			$("#leo4").html(info[7].work_star);
        			$("#leo5").html(info[7].mind_word);
        			$("#leo6").html(info[7].money_word);
        			$("#leo7").html(info[7].love_word);
        			$("#leo8").html(info[7].work_word);
        			$("#virgo1").html(info[6].mind_star);
        			$("#virgo2").html(info[6].money_star);
        			$("#virgo3").html(info[6].love_star);
        			$("#virgo4").html(info[6].work_star);
        			$("#virgo5").html(info[6].mind_word);
        			$("#virgo6").html(info[6].money_word);
        			$("#virgo7").html(info[6].love_word);
        			$("#virgo8").html(info[6].work_word);
        			$("#libra1").html(info[0].mind_star);
        			$("#libra2").html(info[0].money_star);
        			$("#libra3").html(info[0].love_star);
        			$("#libra4").html(info[0].work_star);
        			$("#libra5").html(info[0].mind_word);
        			$("#libra6").html(info[0].money_word);
        			$("#libra7").html(info[0].love_word);
        			$("#libra8").html(info[0].work_word);
        			$("#scor1").html(info[1].mind_star);
        			$("#scor2").html(info[1].money_star);
        			$("#scor3").html(info[1].love_star);
        			$("#scor4").html(info[1].work_star);
        			$("#scor5").html(info[1].mind_word);
        			$("#scor6").html(info[1].money_word);
        			$("#scor7").html(info[1].love_word);
        			$("#scor8").html(info[1].work_word);
        			$("#shotter1").html(info[5].mind_star);
        			$("#shotter2").html(info[5].money_star);
        			$("#shotter3").html(info[5].love_star);
        			$("#shotter4").html(info[5].work_star);
        			$("#shotter5").html(info[5].mind_word);
        			$("#shotter6").html(info[5].money_word);
        			$("#shotter7").html(info[5].love_word);
        			$("#shotter8").html(info[5].work_word);
        			$("#capri1").html(info[11].mind_star);
        			$("#capri2").html(info[11].money_star);
        			$("#capri3").html(info[11].love_star);
        			$("#capri4").html(info[11].work_star);
        			$("#capri5").html(info[11].mind_word);
        			$("#capri6").html(info[11].money_word);
        			$("#capri7").html(info[11].love_word);
        			$("#capri8").html(info[11].work_word);
        			$("#aqua1").html(info[10].mind_star);
        			$("#aqua2").html(info[10].money_star);
        			$("#aqua3").html(info[10].love_star);
        			$("#aqua4").html(info[10].work_star);
        			$("#aqua5").html(info[10].mind_word);
        			$("#aqua6").html(info[10].money_word);
        			$("#aqua7").html(info[10].love_word);
        			$("#aqua8").html(info[10].work_word);
        			$("#pisc1").html(info[9].mind_star);
        			$("#pisc2").html(info[9].money_star);
        			$("#pisc3").html(info[9].love_star);
        			$("#pisc4").html(info[9].work_star);
        			$("#pisc5").html(info[9].mind_word);
        			$("#pisc6").html(info[9].money_word);
        			$("#pisc7").html(info[9].love_word);
        			$("#pisc8").html(info[9].work_word);
        			
        			
        		});
        	
        		
        	}
        	);
        </script>
        
        <script >
        var a = 0;
        var check = false;
        <c:if test="${not empty tarot}">
        a = '${tarot.num}';
        check = true;
        </c:if>
        <c:if test="${empty tarot}">
        a = Math.floor(Math.random()*44+1);
        </c:if>
       
        	function random(){
        		//select tarot      		
        		var url = "/i_plus/View/Tarot.controller?"+
        				"num=" + a;
        		$.getJSON(url,function(data){
        			$("#tarotname").html(data[0]);
            		$("#pic").attr('src','data:'+data[1]);
            		$("#content").html(data[2]);
        		});
        		$('#tarotshow').fancybox().trigger('click');
        		//insert
        		if(!check){
        		$.ajax({
        			"url":"http://localhost:8080/i_plus/services/memberService",
        			"type":"GET",
        			"data":{"account":'${user.account}',"tarot":a},
        			"dataType":"text"
        		});
        		check = true;
        		}
        	}
        </script>
  <style>
  table {width:720px;border-collapse:collapse} 
 
  .c1:hover{
  	background:pink;
  }
 .c1:hover h4{
  
  	color:black;}
  </style> 
 		<!-- fancybox -->
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.mousewheel-3.0.6.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/jquery.fancybox.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/jquery.fancybox.pack.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-buttons.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-buttons.js" />"></script>
		<link rel="stylesheet" href="<c:url value="/css/fancyboxsource/helpers/jquery.fancybox-thumbs.css" />" type="text/css" media="screen" />
		<script type="text/javascript" src="<c:url value="/js/fancyboxsource/helpers/jquery.fancybox-thumbs.js" />"></script>
		<!-- fancybox -->
  	<!--//name、class就是.！#就是抓id！-->       
</head>
<body>
    	
       <!-- 頭頂 -->		 
         <div  style="width:100%;height:150px;background-color: white;border-bottom: 1px solid gray">
         <div style="display:inline-block;margin-left: 180px;margin-top: 50px">
         <a href="<c:url value="/index.jsp" />"  >
         <img src="<c:url value="/index/imgs/images.jpg"/>" style="height:60px;left:50px" ><img src="<c:url value="/index/imgs/logo.png"/>" >
         </a>
         </div>
          	        <!-- menu 登入後 -->
         <c:if test="${not empty user}"> 
        <div style="float:left;margin-left:300px">
        	<span style="font-weight: bold;font-size: 130%;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MypageServlet.controller?account=${user.account}" />">個人MYPAGE</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/ChatServlet.controller?fromacc=${user.account }" />">聊天CHAT</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/SendGiftServlet.controller" />">商城MARKET</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/MapServlet.controller" />">旅遊MAP</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/Match.jsp" />">配對MATCH</a></span>
			<span style="font-weight: bold;font-size: 130%;margin-left:30px;font-family: Microsoft JhengHei;"><a  href="<c:url value="/View/TarotServlet.controller" />">運勢Tarot</a></span>
        </div>
        </c:if>
        <!-- menu  登入後-->
         </div>
 <!-- 頭頂 -->    
        <!-- 登入後的效果-->
        <c:if test="${not empty user}"> 
        <div style="right:70px;position: absolute; top: 0px;">
        	<img src="data:${userpic}" width="50px" height="50px">
        	<span>${user.account}</span>
        </div>
        <div style="right:0px;position: absolute; top: 0px;">
        	<span><a href="<c:url value="/LogoutServlet.controller"/>">登出</a></span>
        </div>
        </c:if>
 <!-- 登入後的效果-->
        <!--網頁主內容-->
        
        <div id="body" class="body" style="margin-top: 5px">

        	<!--body左側 會員&運勢-->
        	<div id="memberdiv" >
	        	<!--會員資料區塊-->
	        	<div id="m_profilediv" >
	        			<h3 class="st1" style="margin:5px 3px 0px 3px ">
	           				<!--這邊是會員個人資料區-->
	        
	           				<span style="font-size:26px">${user.account}</span>
	           				<span style="font-size:16px">&nbsp;&nbsp;</span>
	           				<span style="font-size:16px">&nbsp;</span>
	           				</h3>
	           				<c:choose>
	           					<c:when test="${user.account eq ttry.account}">
	           						<input type="button" name="pro" value="修改會員資料">
	           					</c:when>
	           					<c:otherwise>
	           						
	           					</c:otherwise>
	           				</c:choose>
	        		<div id="m_picdiv" ><img style="width:90% ;height:230px" src="data:${userpic}"/>
	        			<h3 class="st1" style="margin:100px 3px 0px 3px "></h3>
	        		</div>
        			<!--動態的會員資料-->
        			<div id="m_prof2div">
        				<h3 class="rp1" style="color:silver;float:left;margin-left:20px">生日:${user.bdate}</h3>
        				<h3 class="rp1" style="color:silver;float:left;margin-left:20px">居住地:${user.region}</h3>
        				
        				
             		</div>
       			<!--人氣魅力值等等-->
       			
        			<div id="m_popdiv" >
        			<br><br>
        				<h3 class="rp1" style="color:silver;float:left;margin-top:3px;margin-left:20px">暱稱:${user.nickname}</h3>
        				<h3 class="rp1" style="color:silver;float:left;margin-top:3px;margin-left:20px;clear:left">人氣:${user.pop}</h3>
        					
        			</div>
        		
        		</div>
        			<!--每日星座運勢-->
        			<div id="daily_fun" >
        				<h4 style="text-shadow:1px 1px 2px white">請選擇您要查詢運勢的星座</h4>
        				<div style="display:none">
        					<div id="showbox1" style="width:1000px;height:280px;font-size:150%">
        											        					
        						<table cellpadding="10"  style="margin:0px auto;width:980px">
        							<tr id="tr1">
        								<td id ="aries1" style="font-size:70%"></td>
        								<td id ="aries2" style="font-size:70%"></td>
        								<td id ="aries3" style="font-size:70%"></td>
        								<td id ="aries4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>
        							<tr>
        								<td id ="aries5" style="font-size:70%"></td>
        								<td id ="aries6" style="font-size:70%"></td>
        								<td id ="aries7" style="font-size:70%"></td>
        								<td id ="aries8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
     						<div id="showbox2" style="width:1000px;height:280px;font-size:150%">
     							
     							<table cellpadding="10"  style="margin:0px auto;;width:900px">
        							<tr >
        								<td id ="goldenox1" style="font-size:70%"></td>
        								<td id ="goldenox2" style="font-size:70%"></td>
        								<td id ="goldenox3" style="font-size:70%"></td>
        								<td id ="goldenox4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="goldenox5" style="font-size:70%"></td>
        								<td id ="goldenox6" style="font-size:70%"></td>
        								<td id ="goldenox7" style="font-size:70%"></td>
        								<td id ="goldenox8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox3" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="twin1" style="font-size:70%"></td>
        								<td id ="twin2" style="font-size:70%"></td>
        								<td id ="twin3" style="font-size:70%"></td>
        								<td id ="twin4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="twin5" style="font-size:70%"></td>
        								<td id ="twin6" style="font-size:70%"></td>
        								<td id ="twin7" style="font-size:70%"></td>
        								<td id ="twin8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox4" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="cancer1" style="font-size:70%"></td>
        								<td id ="cancer2" style="font-size:70%"></td>
        								<td id ="cancer3" style="font-size:70%"></td>
        								<td id ="cancer4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="cancer5" style="font-size:70%"></td>
        								<td id ="cancer6" style="font-size:70%"></td>
        								<td id ="cancer7" style="font-size:70%"></td>
        								<td id ="cancer8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox5" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="leo1" style="font-size:70%"></td>
        								<td id ="leo2" style="font-size:70%"></td>
        								<td id ="leo3" style="font-size:70%"></td>
        								<td id ="leo4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="leo5" style="font-size:70%"></td>
        								<td id ="leo6" style="font-size:70%"></td>
        								<td id ="leo7" style="font-size:70%"></td>
        								<td id ="leo8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox6" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="virgo1" style="font-size:70%"></td>
        								<td id ="virgo2" style="font-size:70%"></td>
        								<td id ="virgo3" style="font-size:70%"></td>
        								<td id ="virgo4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="virgo5" style="font-size:70%"></td>
        								<td id ="virgo6" style="font-size:70%"></td>
        								<td id ="virgo7" style="font-size:70%"></td>
        								<td id ="virgo8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox7" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="libra1" style="font-size:70%"></td>
        								<td id ="libra2" style="font-size:70%"></td>
        								<td id ="libra3" style="font-size:70%"></td>
        								<td id ="libra4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="libra5" style="font-size:70%"></td>
        								<td id ="libra6" style="font-size:70%"></td>
        								<td id ="libra7" style="font-size:70%"></td>
        								<td id ="libra8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox8" style="width:1000px;height:280px;font-size:150%">      
								 						
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="scor1" style="font-size:70%"></td>
        								<td id ="scor2" style="font-size:70%"></td>
        								<td id ="scor3" style="font-size:70%"></td>
        								<td id ="scor4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="scor5" style="font-size:70%"></td>
        								<td id ="scor6" style="font-size:70%"></td>
        								<td id ="scor7" style="font-size:70%"></td>
        								<td id ="scor8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox9" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="shotter1" style="font-size:70%"></td>
        								<td id ="shotter2" style="font-size:70%"></td>
        								<td id ="shotter3" style="font-size:70%"></td>
        								<td id ="shotter4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="shotter5" style="font-size:70%"></td>
        								<td id ="shotter6" style="font-size:70%"></td>
        								<td id ="shotter7" style="font-size:70%"></td>
        								<td id ="shotter8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox10" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="capri1" style="font-size:70%"></td>
        								<td id ="capri2" style="font-size:70%"></td>
        								<td id ="capri3" style="font-size:70%"></td>
        								<td id ="capri4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="capri5" style="font-size:70%"></td>
        								<td id ="capri6" style="font-size:70%"></td>
        								<td id ="capri7" style="font-size:70%"></td>
        								<td id ="capri8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox11" style="width:1000px;height:280px;font-size:150%">
        					
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="aqua1" style="font-size:70%"></td>
        								<td id ="aqua2" style="font-size:70%"></td>
        								<td id ="aqua3" style="font-size:70%"></td>
        								<td id ="aqua4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="aqua5" style="font-size:70%"></td>
        								<td id ="aqua6" style="font-size:70%"></td>
        								<td id ="aqua7" style="font-size:70%"></td>
        								<td id ="aqua8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        					<div id="showbox12" style="width:1000px;height:280px;font-size:150%">   
        					  						
        						<table cellpadding="10"  style="margin:0px auto;width:900px">
        							<tr>
        								<td id ="pisc1" style="font-size:70%"></td>
        								<td id ="pisc2" style="font-size:70%"></td>
        								<td id ="pisc3" style="font-size:70%"></td>
        								<td id ="pisc4" style="font-size:70%"></td>
        							</tr>
        							<br/><br/>	
        							<tr>
        								<td id ="pisc5" style="font-size:70%"></td>
        								<td id ="pisc6" style="font-size:70%"></td>
        								<td id ="pisc7" style="font-size:70%"></td>
        								<td id ="pisc8" style="font-size:70%"></td>
        							</tr>
        						</table>
        					</div>
        				</div>
        				<!--星座結束  -->
        				
        				<!-- 塔羅開始 -->
        				<script type="text/javascript">
	        				$(function(){
	        				    $('.fancybox').fancybox();
	        				});
        				</script>
        				<span >
        				<br/>
        					<span style="margin-left:20px">
        					
        					<a class="fancybox" href="#showbox1" data-fancybox-group="constellion" ><img id="Aries" src="<c:url value="/images/conimg/1.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox2" data-fancybox-group="constellion" ><img id="Taurus" src="<c:url value="/images/conimg/2.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox3" data-fancybox-group="constellion" ><img id="Gemini" src="<c:url value="/images/conimg/3.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					<a class="fancybox" href="#showbox4" data-fancybox-group="constellion" ><img id="Cancer" src="<c:url value="/images/conimg/4.gif" />" width ="45px" height="45px" style="margin-left:5px"></a></br>
        					</span>
        					<br/>
        					<span style="margin-left:20px">
        					<a class="fancybox" href="#showbox5" data-fancybox-group="constellion" ><img id="Leo" src="<c:url value="/images/conimg/5.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox6" data-fancybox-group="constellion" ><img id="Virgo" src="<c:url value="/images/conimg/6.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox7" data-fancybox-group="constellion" ><img id="Libra" src="<c:url value="/images/conimg/7.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        				    <a class="fancybox" href="#showbox8" data-fancybox-group="constellion" ><img id="Scorpio" src="<c:url value="/images/conimg/8.gif" />" width ="45px" height="45px" style="margin-left:5px"></a></br>
        				    </span >
        				    <br/>
        				    <span style="margin-left:20px">
        					<a class="fancybox" href="#showbox9" data-fancybox-group="constellion" ><img id="Sagittarius" src="<c:url value="/images/conimg/9.gif" />" width ="45px" height="45px" style="margin-right:2px" ></a>
        					<a class="fancybox" href="#showbox10" data-fancybox-group="constellion" ><img id="Capricorn" src="<c:url value="/images/conimg/10.gif" />" width ="45px" height="45px" style="margin-left:3px"></a>
        					<a class="fancybox" href="#showbox11" data-fancybox-group="constellion" ><img id="Aquarius" src="<c:url value="/images/conimg/11.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					<a class="fancybox" href="#showbox12" data-fancybox-group="constellion" ><img id="Pisces" src="<c:url value="/images/conimg/12.gif" />" width ="45px" height="45px" style="margin-left:5px"></a>
        					</span>
        				</span>
        			</div>
        			
        	</div>
   					<script type="text/javascript">
							   $(function(){
							    $('.fancybox-a').fancybox();
							});
   					</script>
        			<!--動態網頁主內容-->
        			<div id="contentdiv" >
        			<h1 id="st1" style="text-shadow:1px 1px 2px white">每日塔羅占卜</h1>
        				<img  src="<c:url value="/images/Tarot-open.jpg" />  " width="540px" height="300px">
        				<br/><br/>
        				<table >
        				<tr><td style="color:white;position:center;font-size:200%"><font face="標楷體">塔羅的歷史</font></td></tr>
        				<tr><td></td></tr>
        				<tr>
        				<td style="color:white;position:center">塔羅牌是指引人生方向的一個好工具，在正確的使用下<br/>
        				它能<font color="red">指點迷津</font>，使人從中獲得人生智慧<br/><br/>
        				塔羅牌亦可用來做為冥想、魔法、靈修的工具，它是映照內心的一面明鏡。<br/>
        				因此許多人將其作為藝術收藏品<br/><br/>
        				在使用塔羅牌來占卜時，必須了解其算出的結果只是<br/>
        				具有<font color="red">時效性</font>，不可能一算定終身。<br/><br/>
        				重點是要從中釐清問題，<font color="red">尋求解決之道</font>，進而改善人生。</td>
        				<td></td>
        				</tr>
        				</table>
        				<br/>
        				<table>
        				<tr><td style="color:white;position:center">現在，請您深呼吸，放鬆自己的心情</td></tr>
        				<tr><td style="color:white;position:center">在心中默念三次你想問你的問題</td></tr>
        				<tr><td style="color:white;position:center">按下抽牌的按鈕</td></tr>
        				<tr><td style="color:white;position:center">您的結果即將呈現......</td></tr>
        				</table>
        				<br/>
        				<table>
        				<c:if test="${empty tarot}">
        				<tr><td><a onClick="random();"><img src="<c:url value="/images/choose.jpg" />"width="150px" height="98px" style="cursor:pointer;border:orange 2px outset"></a></td></tr>
        				</c:if>
        				<c:if test="${not empty tarot}">
        				<tr><td><a onClick="random();"><input type = "button" value="顯示您今天已抽出的牌" width="150px" height="100px" style="cursor:pointer;border:orange 2px outset"></a></td></tr>
        				</c:if>
        				</table>
        				<div style="display:none">
        					<div id="tarotshow">
        						<div id="tarotname" align="center" style="font-size:300%"></div>
        						<table>
        							
        							<tr> 
        							<td width="172px" ><img id="pic" src="" width="172px" height="295px"></td>
        							<td id="content" style="font-size:150%"></td>
        							</tr>
        						</table>
        					</div>
        				</div>
        			</div>
        	
        	
        	
        </div>

        <!--最尾端 版權宣告與連絡資料等-->
        
        <div id="footer" >
        
        	<div style="width: 101%;height:150px;background-color: black;float: left;margin-top: 50px;border-top-style:double;border-top-color:white">
        		<table style="line-height:150%; height:150px; text-align:left;margin-left: 150px">
						<tr>
						<td>
							<img src="<c:url value="/images/fblike.png" />" height="32" width="32" style="cursor:pointer">
							<img src="<c:url value="/images/twitlike.png" />" height="32" width="32" style="cursor:pointer">
							<img src="<c:url value="/images/googlelike.png" />" height="32" width="32" style="cursor:pointer">
						<br/>
							 <h5 class="st1" style="line-height: 0px;margin-bottom: 7px;margin-top: 5px;">愛plus版權所有 &copy2014-2024 All rights Reserved</h5>
							
							 
						</td>
						
						<td style="width:7.4%;position:relative;text-align: center">
							<img src="<c:url value="/images/foot_line.png"/>" height="110px">
						</td>
						<td style="width:20%;position: relative">
							<a href="test.html"><h6 class="st2">聯絡我們</h6></a><br/>
							<a href="test.html"><h6 class="st2">網路交友安全</h6></a><br/>
							<a href="test.html"><h6 class="st2">網站聲名與規範</h6></a><br/>
							<a href="test.html"><h6 class="st2">隱私權</h6></a><br/>
							<a href="test.html"><h6 class="st2" >問與答</h6></a><br/>
						</td>
						</tr>
							
				</table>
        	</div>
        </div>
    </body>
</html>